<template>
	<!--中信银行2021\04\06新版本首页-->
	<div class="home" :style="{background : skinInfo.backImg ?'url('+skinInfo.backImg+')'  : skinInfo.backColor ? skinInfo.backColor : '#FFFFFF'}" @scroll="debounce_scroll2showSearchBar(200)">
		<!-- 氛围图 -->
		<i class="gradual-img" :style="{background : skinInfo.gradualImg ?'url('+skinInfo.gradualImg+')'  : ''}"></i>
    <searchBar  />
		 <div :class="['connect',{'connect-box-ios': isIos && getPlatform =='app'}]">

	        <ZxyhHeader v-if="getPlatform =='app'" isSearch="true"></ZxyhHeader>
			<!-- logo -->
			<div  class="top-img" >
				<img v-if="skinInfo.topImg" :src="skinInfo.topImg"/>
			</div>
			<Banner v-if='isBannerBox' :key = "numKey" :bannerDataArray='bannerDataArray' />
			<LivePreviewCom />
			<MiddleIconCom  v-if='isMiddleIconCom'  :middleIconArray = 'middleIconArray'  />			
			<HomeShortVideoCom :shortVideoArrayInfo = 'shortVideoArrayInfo'/>
			<StarHostsCom v-if="isStarHostsCom" :anchorStarArray = 'anchorStarArray' />
			 <GreatVideCom :class="isIos ? 'great-video-box-ios' : ''" :VideoListArray="videoItem"/>
      <AnimationActivity  v-if = 'isAniActivity'  :offAnimationNum = 'offAnimationNum'   :animationActivityData = 'animationActivityData'  :activityHomeIcon = 'activityHomeIcon'/>
      <!-- 全局背景层组件 -->
      <GlobalMask @formChildMsg='formChildData' v-if="isGlobalMask" />
		</div>
	</div>
</template>

<script>
	import Banner from "./newHomeCom/banner.vue";
	import MiddleIconCom from "./newHomeCom/middleIconCom.vue";
	import LivePreviewCom from "./newHomeCom/livePreviewCom.vue"; //预告组件
	import HomeShortVideoCom from "./newHomeCom/homeShortVideoCom.vue"; //短视频精彩看 展示2个
	import searchBar from "./newHomeCom/searchBar.vue";
	import StarHostsCom from "./newHomeCom/starHostsCom.vue"; //明星主播 展示5个
	import GreatVideCom from "./newHomeCom/greatVideoCom.vue"; //精彩视频
	import ZxyhHeader from "../components/zxyh/zxyhHeader";
  import AnimationActivity from '@/components/animationActivity.vue'; //活动动画组件
    import wxApi from "../util/wxApi";
    import GlobalMask from '@/components/globalMask'; //全局背景层组件
	export default {
		components: {
			Banner,
			MiddleIconCom,
			LivePreviewCom,
			HomeShortVideoCom,
			searchBar,
			StarHostsCom,
			GreatVideCom,
			ZxyhHeader,
      AnimationActivity,
       GlobalMask,//全局背景层组件
		},
		mixins: [wxApi],
		data() {
			return {
				isBannerBox: false,
				isMiddleIconCom:false,
				isStarHostsCom:false,
				numKey:1,
				bannerDataArray: [], //banner列表
				anchorStarArray:[],  //明星主播取前五
				shortVideoArrayInfo:[],  //短视频精彩看取2
				middleIconArray:[],
				getPlatform:fun.getPlatform(),//wx app
        bannerSwitch:true,//banner开关
        shareInfoData: {}, //分享信息
				scroll:0,//页面滚动距离
				isIos,
        isAniActivity:false,//首页活动组件
        animationActivityData:[],
        offAnimationNum:0,
        activityHomeIcon:'',//活动后台配置图标
		timer: null, //防抖,
      videoItem:[]
			}
		},
		computed: {
			isLoadIcon() {
				if(this.$store.state.SysOrgInfo.icon) {
					this.wxRegister(this.wxRegCallback);
					return true
				} else {
					return false
				}
			},
      isGlobalMask() { //操作面板外层透明蒙版 显示
           return this.$store.state.globalMask.isShow
      },
      skinInfo() {
        return this.$store.state.skinStoreInfo
      }
		},
		watch: {
			isLoadIcon(val, oldVal) {},
		},
		created() {
			this.getHomeGreatVideo();
			this.getWXInfo(); //分享信息
		 if(this.bannerSwitch){
		 	 this.getBanner();
		 	 setTimeout(()=>{
		 	 	this.bannerSwitch = false
		 	 },1000)
		 }
     this.getHomeActivityIcon()
		},
		mounted() {
			this.getMiddleIconData();
			this.getAnchorStar();
			this.getShortVideo();//短视频精彩看
			//this.$store.dispatch("showNav");
		},
		beforeRouteLeave(to, from, next) {
			let pathList =[`/${channel}/mine`,`/${channel}/telChannel`] //除了首页二级页面 从其它页面过来滚动到最顶部
			if(pathList.includes(to.path)){
			    this.scroll = 0
			}else{
				this.scroll = document.getElementsByClassName( "home")[0].scrollTop;
			}

			    let isSearchResultPage = `/${channel}/telResult`;
    if (to.path != isSearchResultPage) {
      this.$EventBus.$emit("showHeader", true);
      this.$EventBus.$emit("showSearchBar", false);
    }else{
      this.$EventBus.$emit("showSearchBar", true);
    }


	  this.$store.dispatch("globalMask", {
      isShow: false,
      bgColor: "",
      zIndex: "",
      origin: "",
    });

		   next();
      },
		activated: function() {
			if(!this.bannerSwitch){
				this.getBanner();
			}
			this.$store.dispatch("showNav");
			fun.dotNum('home_page');
			this.numKey++;
			document.getElementsByClassName("home")[0].scrollTop = this.scroll;//设置滚动
		},

		methods: {

			    getHomeGreatVideo() {
      this.$http
        .get("h5live/zx/home/niceBackVideos")
        .then((res) => {
          //useType 1 是 首页    2 专辑管理
          if (res.data.code == "000000") {
            if (res.data.data.length != "0") {
              //console.log(res.data.data)
              this.videoItem = res.data.data;
              this.isGreatVideoBox = true;
            }
          }
        })
        .catch((response) => {});
    },

      getHomeActivityIcon(){//获取首页活动配置图标
         this.$http.get("/h5live/hzb/activity/topIcon")
           .then(res => {
             if (res.data.code == "000000") {//type  0 默认 1 自定义
                if(res.data.data && res.data.data.type =='1'){
                   this.activityHomeIcon = res.data.data.iconUrl
                }
                fun.getActivityData(0,0,(res)=>{// 0  首页  0  首页id
                   //console.log(res.data.data[3])
                   if(res.data.data[3].length){
                      this.animationActivityData = res.data.data[3];
                      this.isAniActivity = true;
                   }
                })
             }
           })
           .catch(response => {
             console.log(response);
           });
      },

	      click2showSearchBar() {
      this.$EventBus.$emit("showSearchBar", true);
    },
    debounce_scroll2showSearchBar(wait) {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      let _this = this;
      this.timer = setTimeout(() => {
        this.scroll = document.getElementsByClassName("home")[0].scrollTop;
        if (this.scroll > 180) {
          this.$EventBus.$emit("showSearchBar", true);
this.$EventBus.$emit("showHeader", false);
          // console.log("大于180px"+this.scroll);
        } else {
          this.$EventBus.$emit("showSearchBar", false);

          this.$EventBus.$emit("showHeader", true);
          // console.log("小于180px"+this.scroll);
        }
      }, wait);
    },
      formChildData(data){
        switch (data.type){
        case "closeAllPopup":
          if (data.origin != "fromSearchBar") {
            this.offAnimationNum++;
          } //丁一20211231在store.state.globalMask对象,增加origin, 在clickSearchBar中增加origin=
          this.$store.dispatch("globalMask", { isShow: false, bgColor: "" });
          break;
        default:
          break;
        }
      },
			//分享信息
			getWXInfo() {
				this.$http.get("/h5live/getOrgShare")
					.then(res => {
						if(res.data.code == "000000" && res.data.data !== null) {
							this.shareInfoData = res.data.data;
						}
					})
					.catch(response => {
						console.log(response);
					});
			},
			wxRegCallback() {
				let opstion = {
					//link: window.location.origin + '/#' + this.$route.path,
					link:fun.getShareUrl(this.$channel,'zxyhHome'),
					title: this.shareInfoData.shareTitle || '【' + this.$store.state.SysOrgInfo.name + '】一起来看直播吧！', // 分享标题
					desc: this.shareInfoData.shareDesc || "精彩直播，尽在" + this.$store.state.SysOrgInfo.name + "手机直播！", //分享描述
					imgUrl: this.shareInfoData.shareIcon || this.$store.state.SysOrgInfo.icon,
					success: function() {
						//alert("分享成功");
					},
					error: function(e) {
						//alert('分享失败:'+JSON.stringify(e))
					}
				};
				this.ShareTimeline(opstion);
			},
			getMiddleIconData(){
				this.$http.get("h5live/zx/home/niceAlbum").then(res => {
						if(res.data.code == "000000") {
							if(res.data.data.length != 0){
								this.middleIconArray = res.data.data;
								this.isMiddleIconCom = true;
							}else{

							}

						}
					})
					.catch(response => {

					});
			},
			getShortVideo(){//短视频精彩看
					this.$http.get("h5live/zx/home/niceVideos").then(res => {
						if(res.data.code == "000000") {
							this.shortVideoArrayInfo = res.data.data[0];
						}
					})
					.catch(response => {

					});
			},
			getAnchorStar(){//明星主播接口
					this.$http.get("h5live/zx/home/anchorStar").then(res => {
						if(res.data.code == "000000") {
							if(res.data.data.length != '0') {
								this.anchorStarArray = res.data.data.splice(0,5)
								this.isStarHostsCom = true;
							}else{
								this.isStarHostsCom = false;
							}
						}
					})
					.catch(response => {

					});
			},
			//获取banner
			getBanner() {
				this.$http.get("h5live/zx/home/adlist?useType=1").then(res => { //useType 1 是 首页    2 专辑管理
						if(res.data.code == "000000") {
							if(res.data.data.length != '0') {
								this.bannerDataArray = res.data.data;
								this.isBannerBox = true;
							}else{
								this.isBannerBox = false;
							}
						}
					})
					.catch(response => {

					});
			},
		}
	}
</script>

<style scoped="scoped">
	.home {
		width: 100vw;
		height: 100vh;
		/*background: url(../assets/images/zxyh/homeBg.jpg) repeat;
		background-size: 100vw 100vh;*/
		overflow: scroll;
		/*background: cover;*/
	}
	.great-video-box-ios{
		padding-bottom: 30px;

		}
	.connect {
		min-height: 100vh;
		/* background: url(../assets/images/zxyh/homeBg.jpg) repeat; */
		background-size: 100vw 1334px  !important;
		padding-bottom: 100px;
	}
	.header-conatiner,.header-conatiner-zxyhIos{
		position: fixed;
		z-index: 16;
	}
	.header-conatiner ~ .connect{
			min-height: calc(100vh - 88px);
			margin-top: 88px;
		}
	.header-conatiner-zxyhIos ~ .connect{
        min-height: calc(100vh - 148px);
		margin-top: 148px;
	}
	.home /deep/ .right-back{
		background: url('../assets/images/zxyh/back_white.png') no-repeat!important;
		background-size: 100% 100%!important;
	}
	.home /deep/ .right-close{
		background: url('../assets/images/zxyh/close_white.png') no-repeat!important;
		background-size: 100% 100%!important;
	}

	.home /deep/  .header-right .begin-search-ru {
    color:white}


    .banner-box-ios ~ .great-video-box{
		margin-bottom: 108px;
	}
	.connect{
		position: relative;
	}
 .gradual-img{
	position: absolute; 
    display: inline-block;
    width: 750px;
    height: 800px;
    background: url('../assets/images/zxyh/home_top.png') no-repeat;
    background-size: 100% 100%!important;
  }
  .connect .top-img{
    width: 750px;
	padding-top: 120px;
	margin-bottom: 15px;
    min-height: 111px;
    z-index: 2;
  }
  .connect img{
	  display: inline-block;
	  height: 100%;
	  width: 100%;
  }
  .connect-box-ios .top-img{
	  padding-top: 180px;  
  }
  .header-conatiner-zxyhIos,
  .header-conatiner {
    position: absolute;
    z-index: 2;

	
  }

 

  .connect /deep/ .header-empty,
  .connect /deep/ .header-box,
  .connect /deep/ .header-left {
    background: none !important;
    color: white;
  }

 
  

</style>
